<template>
  <div class="app-container table-management-optimized">
    <!-- 卡座区 -->
    <div class="table-section-optimized">
      <div class="section-header-optimized">
        <div class="header-left-optimized">
          <el-icon class="section-icon-optimized"><Grid /></el-icon>
          <span class="section-name-optimized">卡座区</span>
          <el-tag type="primary" size="small" round>{{ kardTables.length }}个</el-tag>
        </div>
      </div>
      <div class="table-grid-optimized">
        <div class="table-card-optimized"
          v-for="table in kardTables"
          :key="table.id"
          :class="getTableStatusClass(table.status)"
          @click="handleTableClick(table)"
        >
          <div class="card-header-optimized">
            <div class="table-number-optimized">{{ table.tableNumber }}</div>
            <el-tag :type="getStatusTagType(table.status)" size="small" effect="dark" round>
              {{ getStatusText(table.status) }}
            </el-tag>
          </div>

          <div class="card-body-optimized">
            <div v-if="table.status === '1'" class="table-info-optimized">
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><User /></el-icon>
                <span class="info-text-optimized">{{ table.waiterName }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><UserFilled /></el-icon>
                <span class="info-text-optimized">{{ table.guestCount }}人</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Clock /></el-icon>
                <span class="info-text-optimized">{{ formatTime(table.openTime) }}</span>
              </div>
            </div>
            <div v-else-if="table.status === '2'" class="table-info-optimized">
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><User /></el-icon>
                <span class="info-text-optimized">{{ table.reservationName }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Phone /></el-icon>
                <span class="info-text-optimized">{{ table.reservationPhone }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><UserFilled /></el-icon>
                <span class="info-text-optimized">{{ table.reservationCount }}人</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Clock /></el-icon>
                <span class="info-text-optimized">{{ formatTime(table.reservationTime) }}</span>
              </div>
            </div>
            <div v-else class="table-empty-optimized">
              <el-icon class="empty-icon-optimized"><CircleCheck /></el-icon>
              <span class="empty-text-optimized">空闲可用</span>
            </div>
          </div>

          <div class="card-actions-optimized">
            <template v-if="table.status === '0'">
              <el-button type="primary" size="small" @click.stop="handleOpen(table)" round>
                <el-icon><Plus /></el-icon>开台
              </el-button>
              <el-button type="success" size="small" @click.stop="handleReserve(table)" round>
                <el-icon><Calendar /></el-icon>预定
              </el-button>
            </template>
            <template v-if="table.status === '1'">
              <el-button type="primary" size="small" @click.stop="handleOrder(table)" round>
                <el-icon><DocumentAdd /></el-icon>{{ table.hasOrder ? '加单' : '点单' }}
              </el-button>
              <el-button type="warning" size="small" @click.stop="handleChange(table)" round>
                <el-icon><Sort /></el-icon>换台
              </el-button>
              <el-button v-if="table.hasOrder" type="danger" size="small" @click.stop="handleCheckout(table)" round>
                <el-icon><Wallet /></el-icon>结账
              </el-button>
              <el-button v-if="!table.hasOrder" type="info" size="small" @click.stop="handleCloseTable(table)" round>
                <el-icon><Close /></el-icon>关台
              </el-button>
            </template>
            <template v-if="table.status === '2'">
              <el-button type="info" size="small" @click.stop="handleCancelReservation(table)" round>
                <el-icon><Close /></el-icon>取消预定
              </el-button>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 包间区 -->
    <div class="table-section-optimized">
      <div class="section-header-optimized">
        <div class="header-left-optimized">
          <el-icon class="section-icon-optimized"><OfficeBuilding /></el-icon>
          <span class="section-name-optimized">包间区</span>
          <el-tag type="primary" size="small" round>{{ roomTables.length }}个</el-tag>
        </div>
      </div>
      <div class="table-grid-optimized">
        <div class="table-card-optimized"
          v-for="table in roomTables"
          :key="table.id"
          :class="getTableStatusClass(table.status)"
          @click="handleTableClick(table)"
        >
          <div class="card-header-optimized">
            <div class="table-number-optimized">{{ table.tableNumber }}</div>
            <el-tag :type="getStatusTagType(table.status)" size="small" effect="dark" round>
              {{ getStatusText(table.status) }}
            </el-tag>
          </div>

          <div class="card-body-optimized">
            <div v-if="table.status === '1'" class="table-info-optimized">
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><User /></el-icon>
                <span class="info-text-optimized">{{ table.waiterName }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><UserFilled /></el-icon>
                <span class="info-text-optimized">{{ table.guestCount }}人</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Clock /></el-icon>
                <span class="info-text-optimized">{{ formatTime(table.openTime) }}</span>
              </div>
            </div>
            <div v-else-if="table.status === '2'" class="table-info-optimized">
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><User /></el-icon>
                <span class="info-text-optimized">{{ table.reservationName }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Phone /></el-icon>
                <span class="info-text-optimized">{{ table.reservationPhone }}</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><UserFilled /></el-icon>
                <span class="info-text-optimized">{{ table.reservationCount }}人</span>
              </div>
              <div class="info-item-optimized">
                <el-icon class="info-icon-optimized"><Clock /></el-icon>
                <span class="info-text-optimized">{{ formatTime(table.reservationTime) }}</span>
              </div>
            </div>
            <div v-else class="table-empty-optimized">
              <el-icon class="empty-icon-optimized"><CircleCheck /></el-icon>
              <span class="empty-text-optimized">空闲可用</span>
            </div>
          </div>

          <div class="card-actions-optimized">
            <template v-if="table.status === '0'">
              <el-button type="primary" size="small" @click.stop="handleOpen(table)" round>
                <el-icon><Plus /></el-icon>开台
              </el-button>
              <el-button type="success" size="small" @click.stop="handleReserve(table)" round>
                <el-icon><Calendar /></el-icon>预定
              </el-button>
            </template>
            <template v-if="table.status === '1'">
              <el-button type="primary" size="small" @click.stop="handleOrder(table)" round>
                <el-icon><DocumentAdd /></el-icon>{{ table.hasOrder ? '加单' : '点单' }}
              </el-button>
              <el-button type="warning" size="small" @click.stop="handleChange(table)" round>
                <el-icon><Sort /></el-icon>换台
              </el-button>
              <el-button v-if="table.hasOrder" type="danger" size="small" @click.stop="handleCheckout(table)" round>
                <el-icon><Wallet /></el-icon>结账
              </el-button>
              <el-button v-if="!table.hasOrder" type="info" size="small" @click.stop="handleCloseTable(table)" round>
                <el-icon><Close /></el-icon>关台
              </el-button>
            </template>
            <template v-if="table.status === '2'">
              <el-button type="info" size="small" @click.stop="handleCancelReservation(table)" round>
                <el-icon><Close /></el-icon>取消预定
              </el-button>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 开台对话框 -->
    <el-dialog title="开台" v-model="openDialog" width="500px" append-to-body>
      <el-form ref="openFormRef" :model="openForm" :rules="openRules" label-width="100px">
        <el-form-item label="餐台号">
          <el-input v-model="openForm.tableNumber" disabled />
        </el-form-item>
        <el-form-item label="开台人" prop="waiterName">
          <el-input v-model="openForm.waiterName" placeholder="请输入服务员姓名" />
        </el-form-item>
        <el-form-item label="就餐人数" prop="guestCount">
          <el-input-number v-model="openForm.guestCount" :min="1" :max="20" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitOpen">确 定</el-button>
          <el-button @click="openDialog = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 换台对话框 -->
    <el-dialog title="换台" v-model="changeDialog" width="500px" append-to-body>
      <el-form ref="changeFormRef" :model="changeForm" :rules="changeRules" label-width="100px">
        <el-form-item label="原餐台">
          <el-input v-model="changeForm.oldTableNumber" disabled />
        </el-form-item>
        <el-form-item label="新餐台" prop="newTableId">
          <el-select v-model="changeForm.newTableId" placeholder="请选择新餐台" style="width: 100%">
            <el-option
              v-for="table in availableTables"
              :key="table.id"
              :label="table.tableNumber"
              :value="table.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitChange">确 定</el-button>
          <el-button @click="changeDialog = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 预定对话框 -->
    <el-dialog title="预定餐台" v-model="reserveDialog" width="500px" append-to-body>
      <el-form ref="reserveFormRef" :model="reserveForm" :rules="reserveRules" label-width="100px">
        <el-form-item label="餐台号">
          <el-input v-model="reserveForm.tableNumber" disabled />
        </el-form-item>
        <el-form-item label="预定人" prop="reservationName">
          <el-input v-model="reserveForm.reservationName" placeholder="请输入预定人姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="reservationPhone">
          <el-input v-model="reserveForm.reservationPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="预定时间" prop="reservationTime">
          <el-date-picker
            v-model="reserveForm.reservationTime"
            type="datetime"
            placeholder="请选择预定时间"
            style="width: 100%"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="预定人数" prop="reservationCount">
          <el-input-number v-model="reserveForm.reservationCount" :min="1" :max="20" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReserve">确 定</el-button>
          <el-button @click="reserveDialog = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 点单/加单对话框 -->
    <el-dialog
      v-model="orderDialog"
      width="90vw"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      top="3vh"
      class="order-dialog-optimized"
    >
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; color: #fff; min-height: 80px;">
          <div style="display: flex; align-items: center; gap: 16px;">
            <div style="width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
              <el-icon style="font-size: 24px; color: #fff;"><DocumentAdd /></el-icon>
            </div>
            <div style="display: flex; flex-direction: column; gap: 4px;">
              <span style="font-size: 20px; font-weight: 700; letter-spacing: 0.5px;">{{ orderDialogTitle }}</span>
              <span style="font-size: 13px; opacity: 0.9;">{{ currentTable?.tableNumber }} · {{ currentTable?.waiterName }} · {{ currentTable?.guestCount }}人</span>
            </div>
          </div>
          <div style="display: flex; align-items: center; gap: 12px;">
            <el-tag type="success" effect="dark" size="large" round style="padding: 8px 16px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important;">
              <el-icon style="margin-right: 4px;"><Clock /></el-icon>
              {{ formatTime(currentTable?.openTime) }}
            </el-tag>
            <el-button @click="orderDialog = false" circle style="background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>
      </template>
      <div class="order-container-optimized" style="display: flex; flex-direction: row; height: 60vh; gap: 0; background: #f5f7fa;">
        <!-- 左侧：菜品选择 -->
        <div class="menu-selection-optimized" style="width: 40%; display: flex; flex-direction: column; background: #fff; border-right: 2px solid #e4e7ed; overflow: hidden;">
          <!-- 搜索栏 -->
          <div class="search-section-modern" style="flex-shrink: 0; padding: 16px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 1px solid #e4e7ed;">
            <div class="search-wrapper-modern">
              <el-input
                v-model="menuSearchText"
                placeholder="搜索菜品名称..."
                clearable
                size="large"
                class="search-input-modern"
                style="--el-input-border-radius: 24px;"
              >
                <template #prefix>
                  <el-icon class="search-icon-modern" style="font-size: 18px; color: #667eea;"><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>

          <!-- 菜品列表头部 -->
          <div class="section-header-modern" style="flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: linear-gradient(135deg, #fafbfc 0%, #fff 100%); border-bottom: 2px solid #e4e7ed;">
            <div class="header-left-custom" style="display: flex; align-items: center; gap: 10px;">
              <el-icon class="section-icon-modern" style="font-size: 20px; color: #667eea;"><Food /></el-icon>
              <span class="section-title-modern" style="color: #303133; font-size: 16px; font-weight: 700; letter-spacing: 0.3px;">菜品列表</span>
            </div>
            <el-tag type="info" size="small" effect="plain" round>共 {{ filteredMenuList.length }} 道菜</el-tag>
          </div>
          <div class="menu-table-wrapper-optimized" style="flex: 1; overflow-y: auto; overflow-x: hidden; height: calc(60vh - 120px);">
            <el-table
              :data="filteredMenuList"
              height="100%"
              @row-click="handleMenuRowClick"
              stripe
              size="default"
              :header-cell-style="{background: '#fafbfc', color: '#303133', fontWeight: '700', fontSize: '14px', borderBottom: '2px solid #e4e7ed'}"
              :row-style="getMenuRowStyle"
              :row-class-name="getMenuRowClassName"
              class="menu-table-modern"
            >
              <el-table-column prop="name" label="菜品名称" min-width="140" show-overflow-tooltip>
                <template #default="scope">
                  <div class="menu-name-cell-modern" style="display: flex; align-items: center; gap: 10px; padding: 4px 0;">
                    <div class="menu-icon-wrapper" :style="{
                      width: '32px',
                      height: '32px',
                      borderRadius: '8px',
                      background: scope.row.num <= 0 ? 'linear-gradient(135deg, #c0c4cc 0%, #d3d4d6 100%)' : 'linear-gradient(135deg, #67c23a 0%, #85ce61 100%)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      boxShadow: scope.row.num <= 0 ? '0 2px 8px rgba(192, 196, 204, 0.3)' : '0 2px 8px rgba(103, 194, 58, 0.3)',
                      flexShrink: 0,
                      opacity: scope.row.num <= 0 ? 0.5 : 1
                    }">
                      <el-icon class="food-icon-modern" style="font-size: 18px; color: #fff;"><Food /></el-icon>
                    </div>
                    <span class="menu-name-text" :style="{
                      fontSize: '14px',
                      fontWeight: 500,
                      color: scope.row.num <= 0 ? '#c0c4cc' : '#303133',
                      textDecoration: scope.row.num <= 0 ? 'line-through' : 'none'
                    }">{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="单价" width="100" align="center">
                <template #default="scope">
                  <span class="price-text-modern" :style="{
                    color: scope.row.num <= 0 ? '#c0c4cc' : '#f56c6c',
                    fontWeight: 700,
                    fontSize: '15px',
                    textDecoration: scope.row.num <= 0 ? 'line-through' : 'none'
                  }">¥{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="num" label="库存" width="90" align="center">
                <template #default="scope">
                  <el-tag
                    :type="scope.row.num > 10 ? 'success' : scope.row.num > 0 ? 'warning' : 'danger'"
                    size="default"
                    effect="light"
                    round
                  >
                    <el-icon><Box /></el-icon>
                    {{ scope.row.num }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center" fixed="right">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="default"
                    :disabled="scope.row.num <= 0"
                    @click.stop="handleMenuSelect(scope.row)"
                    round
                    class="add-btn-modern"
                  >
                    <el-icon><Plus /></el-icon>
                    添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 右侧：已选菜品 -->
        <div class="order-details-optimized" style="width: 60%; display: flex; flex-direction: column; background: #fff; overflow: hidden;">
          <div class="section-header-modern" style="flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: linear-gradient(135deg, #fafbfc 0%, #fff 100%); border-bottom: 2px solid #e4e7ed;">
            <div class="header-left-custom" style="display: flex; align-items: center; gap: 10px;">
              <el-icon class="section-icon-modern cart-icon" style="font-size: 20px; color: #f56c6c;"><ShoppingCart /></el-icon>
              <span class="section-title-modern" style="color: #303133; font-size: 16px; font-weight: 700; letter-spacing: 0.3px;">已选菜品</span>
            </div>
            <div class="header-right-custom">
              <el-tag type="primary" size="small" effect="dark" round>
                <el-icon><Tickets /></el-icon>
                {{ selectedMenus.length }} 项
              </el-tag>
            </div>
          </div>

          <!-- 左右布局：表格 + 汇总 -->
          <div style="flex: 1; display: flex; flex-direction: row; overflow: hidden;">
            <!-- 左侧：已选菜品表格 -->
            <div class="order-table-wrapper-optimized" style="flex: 1; overflow-y: auto; overflow-x: hidden;">
              <div v-if="selectedMenus.length === 0" class="empty-cart-modern" style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #909399; height: 100%;">
                <el-icon class="empty-icon" style="font-size: 64px; color: #dcdfe6; margin-bottom: 16px;"><ShoppingCartFull /></el-icon>
                <p class="empty-text" style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">还没有选择菜品</p>
                <p class="empty-hint" style="font-size: 13px; color: #c0c4cc;">点击左侧菜品添加到购物车</p>
              </div>
              <el-table
                v-else
                :data="selectedMenus"
                height="100%"
                stripe
                size="default"
                :header-cell-style="{background: '#fafbfc', color: '#303133', fontWeight: '700', fontSize: '14px', borderBottom: '2px solid #e4e7ed'}"
                class="order-table-modern"
              >
                <el-table-column prop="menuName" label="菜品名称" min-width="130" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="menu-name-cell-modern" style="display: flex; align-items: center; gap: 10px; padding: 4px 0;">
                      <div class="menu-icon-wrapper selected" style="width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); flex-shrink: 0;">
                        <el-icon class="food-icon-modern selected" style="font-size: 18px; color: #fff;"><Food /></el-icon>
                      </div>
                      <span class="menu-name-text" style="font-size: 14px; font-weight: 500; color: #303133;">{{ scope.row.menuName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" width="90" align="center">
                  <template #default="scope">
                    <span class="price-text-modern" style="color: #f56c6c; font-weight: 700; font-size: 15px;">¥{{ scope.row.price }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" label="数量" width="180" align="center">
                  <template #default="scope">
                    <el-input-number
                      v-model="scope.row.quantity"
                      :min="1"
                      :max="99"
                      size="default"
                      controls-position="right"
                      @change="calculateSubtotal(scope.row)"
                      class="quantity-input-modern"
                      style="width: 150px;"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="subtotal" label="小计" width="95" align="center">
                  <template #default="scope">
                    <span class="subtotal-text-modern" style="color: #f56c6c; font-weight: 700; font-size: 16px;">¥{{ scope.row.subtotal }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="85" align="center" fixed="right">
                  <template #default="scope">
                    <el-button
                      type="danger"
                      size="default"
                      @click="removeMenu(scope.$index)"
                      circle
                      class="delete-btn-modern"
                    >
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 右侧：汇总信息 -->
            <div class="order-summary-modern" style="width: 320px; flex-shrink: 0; padding: 20px; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); border-left: 3px solid #f56c6c; box-shadow: -4px 0 16px rgba(245, 108, 108, 0.2); display: flex; flex-direction: column; justify-content: center;">
              <div class="summary-card-modern" style="background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 24px; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);">
                <div style="text-align: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px dashed #f56c6c;">
                  <el-icon style="font-size: 48px; color: #f56c6c; margin-bottom: 12px;"><Wallet /></el-icon>
                  <div style="font-size: 14px; color: #909399; margin-bottom: 8px;">订单总额</div>
                  <div style="font-size: 36px; font-weight: 800; color: #f56c6c; letter-spacing: 1px;">¥{{ finalTotalAmount }}</div>
                </div>

                <div class="summary-row-modern" style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                  <div class="summary-item-modern" style="display: flex; align-items: center; gap: 10px;">
                    <el-icon style="font-size: 20px; color: #667eea;"><Tickets /></el-icon>
                    <span style="color: #606266; font-size: 15px; font-weight: 600;">菜品总计</span>
                  </div>
                  <span style="color: #303133; font-size: 18px; font-weight: 700;">¥{{ orderTotalAmount }}</span>
                </div>

                <div class="summary-row-modern" v-if="tableFee > 0" style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                  <div class="summary-item-modern" style="display: flex; align-items: center; gap: 10px;">
                    <el-icon style="font-size: 20px; color: #667eea;"><User /></el-icon>
                    <span style="color: #606266; font-size: 15px; font-weight: 600;">餐位费 ({{ currentTable?.guestCount }}人)</span>
                  </div>
                  <span style="color: #303133; font-size: 18px; font-weight: 700;">¥{{ tableFee }}</span>
                </div>

                <div style="margin-top: 20px; padding: 16px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; border: 2px solid #bae6fd;">
                  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                    <el-icon style="font-size: 18px; color: #0284c7;"><InfoFilled /></el-icon>
                    <span style="font-size: 13px; color: #0369a1; font-weight: 600;">订单信息</span>
                  </div>
                  <div style="font-size: 12px; color: #0c4a6e; line-height: 1.6;">
                    <div>餐台：{{ currentTable?.tableNumber }}</div>
                    <div>服务员：{{ currentTable?.waiterName }}</div>
                    <div>人数：{{ currentTable?.guestCount }}人</div>
                    <div>菜品数：{{ selectedMenus.length }}项</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer-modern" style="display: flex; justify-content: flex-end; gap: 16px;">
          <el-button @click="orderDialog = false" :disabled="isSubmitting" size="large" class="cancel-btn-modern" style="padding: 12px 32px; font-size: 15px; font-weight: 600; border-radius: 12px;">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
          <el-button
            type="primary"
            @click="submitOrder"
            :disabled="selectedMenus.length === 0 || isSubmitting"
            :loading="isSubmitting"
            size="large"
            class="submit-btn-modern"
            style="padding: 12px 40px; font-size: 15px; font-weight: 700; border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);"
          >
            <el-icon v-if="!isSubmitting"><Check /></el-icon>
            {{ isSubmitting ? '提交中...' : '确认下单' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 结账对话框 -->
    <el-dialog
      v-model="checkoutDialog"
      width="750px"
      append-to-body
      :show-close="false"
      top="8vh"
      class="checkout-dialog-modern"
    >
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg, #f56c6c 0%, #e6a23c 100%); margin: 0; color: #fff; min-height: 64px;">
          <div style="display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
              <el-icon style="font-size: 20px; color: #fff;"><Wallet /></el-icon>
            </div>
            <div style="display: flex; flex-direction: column; gap: 2px;">
              <span style="font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">结账</span>
              <span style="font-size: 12px; opacity: 0.9;">{{ checkoutInfo.tableNumber }} · {{ checkoutInfo.waiterName }} · {{ checkoutInfo.guestCount }}人</span>
            </div>
          </div>
          <div style="display: flex; align-items: center; gap: 10px;">
            <el-tag type="warning" effect="dark" size="default" round style="padding: 6px 12px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important;">
              <el-icon style="margin-right: 4px;"><Clock /></el-icon>
              {{ formatTime(checkoutInfo.openTime) }}
            </el-tag>
            <el-button @click="checkoutDialog = false" circle size="small" style="background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>
      </template>

      <div class="checkout-container-modern">
        <!-- 消费明细标题 -->
        <div class="section-header-modern" style="display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: linear-gradient(135deg, #fafbfc 0%, #fff 100%); border-bottom: 2px solid #e4e7ed; margin: 0;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-icon style="font-size: 18px; color: #f56c6c;"><Tickets /></el-icon>
            <span style="color: #303133; font-size: 15px; font-weight: 700; letter-spacing: 0.3px;">消费明细</span>
          </div>
          <el-tag type="info" size="small" effect="plain" round>共 {{ checkoutDetails.length }} 项</el-tag>
        </div>

        <!-- 消费明细表格 -->
        <div style="padding: 0 20px; max-height: 380px; overflow-y: auto;">
          <el-table
            :data="checkoutDetails"
            stripe
            size="small"
            :row-class-name="getRowClassName"
            :header-cell-style="{background: '#fafbfc', color: '#303133', fontWeight: '600', fontSize: '13px', borderBottom: '2px solid #e4e7ed', padding: '8px 0'}"
            :cell-style="{padding: '8px 0'}"
            style="margin-top: 0;"
          >
            <el-table-column prop="menuName" label="菜品名称" min-width="130">
              <template #default="scope">
                <div style="display: flex; align-items: center; gap: 8px;">
                  <div v-if="scope.row.menuId === 0 || scope.row.menuName === '餐位费'" style="width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(144, 147, 153, 0.25); flex-shrink: 0;">
                    <el-icon style="font-size: 16px; color: #fff;"><User /></el-icon>
                  </div>
                  <div v-else style="width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(64, 158, 255, 0.25); flex-shrink: 0;">
                    <el-icon style="font-size: 16px; color: #fff;"><Food /></el-icon>
                  </div>
                  <span style="font-size: 13px; font-weight: 500; color: #303133;">{{ scope.row.menuName }}</span>
                  <el-tag v-if="isNewItem(scope.row)" type="danger" size="small" effect="dark" round>新加</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" width="90" align="center">
              <template #default="scope">
                <span style="color: #f56c6c; font-weight: 700; font-size: 14px;">¥{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="70" align="center">
              <template #default="scope">
                <el-tag type="info" effect="plain" round size="small">{{ scope.row.quantity }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="subtotal" label="小计" width="90" align="center">
              <template #default="scope">
                <span style="color: #f56c6c; font-weight: 700; font-size: 14px;">¥{{ scope.row.subtotal }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="kitchenStatus" label="出餐状态" width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.menuId === 0 || scope.row.menuName === '餐位费'" style="color: #c0c4cc;">-</span>
                <el-tag
                  v-else-if="scope.row.kitchenStatus == 1 || scope.row.kitchenStatus === '1'"
                  type="success"
                  size="small"
                  effect="light"
                  round
                >
                  <el-icon style="font-size: 12px;"><CircleCheck /></el-icon>
                  已出餐
                </el-tag>
                <el-tag
                  v-else
                  type="warning"
                  size="small"
                  effect="dark"
                  round
                >
                  <el-icon style="font-size: 12px;"><Clock /></el-icon>
                  待出餐
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 金额汇总区域 - 一行显示 -->
        <div style="padding: 16px 0; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); margin: 16px 0 0 0;">
          <div style="background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 16px 20px; margin: 0 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div style="display: flex; justify-content: space-between; align-items: center; gap: 20px;">
              <!-- 原始金额 -->
              <div style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;">
                <div style="display: flex; align-items: center; gap: 6px;">
                  <el-icon style="font-size: 16px; color: #909399;"><Tickets /></el-icon>
                  <span style="color: #909399; font-size: 12px; font-weight: 600;">原始金额</span>
                </div>
                <span style="color: #909399; font-size: 18px; font-weight: 700; text-decoration: line-through;">¥{{ checkoutInfo.totalAmount }}</span>
              </div>

              <!-- 分隔线 -->
              <div style="width: 1px; height: 50px; background: linear-gradient(180deg, transparent, #e4e7ed, transparent);"></div>

              <!-- 实收金额 -->
              <div style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;">
                <div style="display: flex; align-items: center; gap: 6px;">
                  <el-icon style="font-size: 16px; color: #409eff;"><Money /></el-icon>
                  <span style="color: #606266; font-size: 12px; font-weight: 600;">实收金额</span>
                </div>
                <el-input-number
                  v-model="actualAmount"
                  :min="0"
                  :max="parseFloat(checkoutInfo.totalAmount)"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  size="default"
                  style="width: 160px;"
                />
              </div>

              <!-- 分隔线 -->
              <div style="width: 1px; height: 50px; background: linear-gradient(180deg, transparent, #e4e7ed, transparent);"></div>

              <!-- 应收金额 -->
              <div style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;">
                <div style="display: flex; align-items: center; gap: 6px;">
                  <el-icon style="font-size: 16px; color: #f56c6c;"><Wallet /></el-icon>
                  <span style="color: #606266; font-size: 12px; font-weight: 600;">应收金额</span>
                </div>
                <span style="font-size: 22px; font-weight: 800; color: #f56c6c; letter-spacing: 0.5px;">¥{{ actualAmount.toFixed(2) }}</span>
              </div>
            </div>

            <!-- 优惠金额提示（如果有） -->
            <div v-if="discountAmount > 0" style="margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4e7ed; text-align: center;">
              <el-tag type="success" effect="light" round>
                <el-icon style="margin-right: 4px;"><Discount /></el-icon>
                已优惠 ¥{{ discountAmount }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; gap: 12px; padding: 12px 20px;">
          <el-button @click="checkoutDialog = false" :disabled="isCheckoutSubmitting" size="default" style="padding: 10px 24px; font-size: 14px; font-weight: 600; border-radius: 10px;">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
          <el-button
            type="primary"
            @click="confirmCheckout"
            :disabled="isCheckoutSubmitting"
            :loading="isCheckoutSubmitting"
            size="default"
            style="padding: 10px 32px; font-size: 14px; font-weight: 700; border-radius: 10px; background: linear-gradient(135deg, #f56c6c 0%, #e6a23c 100%); border: none; box-shadow: 0 3px 10px rgba(245, 108, 108, 0.35);"
          >
            <el-icon v-if="!isCheckoutSubmitting"><Check /></el-icon>
            {{ isCheckoutSubmitting ? '结账中...' : '确认结账' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CreatTable">
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
import {
  listAllTable,
  openTable,
  changeTable,
  reserveTable,
  checkoutTable,
  initializeTables,
  updateTable
} from '@/api/restaurant/table'
import {
  placeOrder,
  addOrderItems,
  getOrderByTableId,
  checkoutOrder
} from '@/api/restaurant/order'
import { listAllMenu } from '@/api/restaurant/restsurant'
import {
  Grid,
  OfficeBuilding,
  User,
  UserFilled,
  Clock,
  Phone,
  CircleCheck,
  Box,
  Tickets,
  ShoppingCartFull,
  Wallet,
  DocumentAdd,
  Search,
  Food,
  Check,
  Close,
  Delete,
  InfoFilled,
  Money,
  Discount
} from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

// 数据列表
const tableList = ref([])
const loading = ref(false)

// 计算属性：卡座区餐台
const kardTables = computed(() => {
  return tableList.value.filter(table => table.tableType === '1')
})

// 计算属性：包间区餐台
const roomTables = computed(() => {
  return tableList.value.filter(table => table.tableType === '2')
})

// 计算属性：可用餐台（用于换台）
const availableTables = computed(() => {
  return tableList.value.filter(table => table.status === '0')
})

// 开台对话框
const openDialog = ref(false)
const openFormRef = ref()
const openForm = reactive({
  id: null,
  tableNumber: '',
  waiterName: '',
  guestCount: 1
})
const openRules = {
  waiterName: [
    { required: true, message: '请输入服务员姓名', trigger: 'blur' }
  ],
  guestCount: [
    { required: true, message: '请输入就餐人数', trigger: 'blur' }
  ]
}

// 换台对话框
const changeDialog = ref(false)
const changeFormRef = ref()
const changeForm = reactive({
  oldTableId: null,
  oldTableNumber: '',
  newTableId: null
})
const changeRules = {
  newTableId: [
    { required: true, message: '请选择新餐台', trigger: 'change' }
  ]
}

// 预定对话框
const reserveDialog = ref(false)
const reserveFormRef = ref()
const reserveForm = reactive({
  id: null,
  tableNumber: '',
  reservationName: '',
  reservationPhone: '',
  reservationTime: '',
  reservationCount: 1
})
const reserveRules = {
  reservationName: [
    { required: true, message: '请输入预定人姓名', trigger: 'blur' }
  ],
  reservationPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  reservationTime: [
    { required: true, message: '请选择预定时间', trigger: 'change' }
  ],
  reservationCount: [
    { required: true, message: '请输入预定人数', trigger: 'blur' }
  ]
}

// 点单对话框
const orderDialog = ref(false)
const orderDialogTitle = ref('点单')
const currentTable = ref(null)
const currentOrder = ref(null)
const menuList = ref([])
const selectedMenus = ref([])
const menuSearchText = ref('')
const isSubmitting = ref(false) // 防止重复提交

// 餐位费常量（每人1元）
const TABLE_FEE_PER_PERSON = 1

// 计算餐位费
const tableFee = computed(() => {
  if (!currentTable.value || currentOrder.value) {
    // 如果已经有订单了（加单），不再添加餐位费
    return 0
  }
  return (currentTable.value?.guestCount || 0) * TABLE_FEE_PER_PERSON
})

// 过滤后的菜单列表（支持模糊搜索）
const filteredMenuList = computed(() => {
  if (!menuSearchText.value) {
    return menuList.value
  }
  return menuList.value.filter(menu =>
    menu.name.toLowerCase().includes(menuSearchText.value.toLowerCase())
  )
})

// 计算订单总金额（不含餐位费）
const orderTotalAmount = computed(() => {
  return selectedMenus.value.reduce((total, item) => {
    return total + parseFloat(item.subtotal || 0)
  }, 0).toFixed(2)
})

// 计算最终总金额（含餐位费）
const finalTotalAmount = computed(() => {
  return (parseFloat(orderTotalAmount.value) + tableFee.value).toFixed(2)
})

// 结账对话框
const checkoutDialog = ref(false)
const checkoutInfo = reactive({
  tableNumber: '',
  waiterName: '',
  guestCount: 0,
  openTime: '',
  totalAmount: 0
})
const checkoutDetails = ref([])
const actualAmount = ref(0) // 实收金额
const isCheckoutSubmitting = ref(false) // 防止重复结账
const discountAmount = computed(() => {
  const discount = parseFloat(checkoutInfo.totalAmount) - actualAmount.value
  return discount > 0 ? discount.toFixed(2) : 0
})

// 查询餐台列表
function getList() {
  loading.value = true
  listAllTable({}).then(response => {
    tableList.value = response.data
    // 为每个使用中的餐台查询是否有订单
    tableList.value.forEach(table => {
      if (table.status === '1') {
        getOrderByTableId(table.id).then(res => {
          table.hasOrder = res.data != null
        })
      } else {
        table.hasOrder = false
      }
    })
    loading.value = false
  })
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    '0': '空闲',
    '1': '使用中',
    '2': '已预定'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
function getStatusTagType(status) {
  const typeMap = {
    '0': 'success',
    '1': 'danger',
    '2': 'warning'
  }
  return typeMap[status] || 'info'
}

// 获取餐台状态样式类
function getTableStatusClass(status) {
  const classMap = {
    '0': 'status-free',
    '1': 'status-busy',
    '2': 'status-reserved'
  }
  return classMap[status] || ''
}

// 格式化时间
function formatTime(time) {
  if (!time) return ''
  return proxy.parseTime(time, '{y}-{m}-{d} {h}:{i}')
}

// 点击餐台卡片
function handleTableClick(table) {
  // 可以在这里添加查看详情的逻辑
  console.log('点击餐台:', table)
}

// 开台
function handleOpen(table) {
  openForm.id = table.id
  openForm.tableNumber = table.tableNumber
  openForm.waiterName = ''
  openForm.guestCount = 1
  openDialog.value = true
}

// 提交开台
function submitOpen() {
  proxy.$refs.openFormRef.validate(valid => {
    if (valid) {
      openTable(openForm).then(response => {
        proxy.$modal.msgSuccess('开台成功')
        openDialog.value = false
        getList()
      })
    }
  })
}

// 换台
function handleChange(table) {
  changeForm.oldTableId = table.id
  changeForm.oldTableNumber = table.tableNumber
  changeForm.newTableId = null
  changeDialog.value = true
}

// 提交换台
function submitChange() {
  proxy.$refs.changeFormRef.validate(valid => {
    if (valid) {
      changeTable({
        oldTableId: changeForm.oldTableId,
        newTableId: changeForm.newTableId
      }).then(response => {
        proxy.$modal.msgSuccess('换台成功')
        changeDialog.value = false
        getList()
      })
    }
  })
}

// 预定
function handleReserve(table) {
  reserveForm.id = table.id
  reserveForm.tableNumber = table.tableNumber
  reserveForm.reservationName = ''
  reserveForm.reservationPhone = ''
  reserveForm.reservationTime = ''
  reserveForm.reservationCount = 1
  reserveDialog.value = true
}

// 提交预定
function submitReserve() {
  proxy.$refs.reserveFormRef.validate(valid => {
    if (valid) {
      reserveTable(reserveForm).then(response => {
        proxy.$modal.msgSuccess('预定成功')
        reserveDialog.value = false
        getList()
      })
    }
  })
}

// 点单/加单
function handleOrder(table) {
  currentTable.value = table

  // 查询该餐台的订单
  getOrderByTableId(table.id).then(res => {
    currentOrder.value = res.data
    if (currentOrder.value) {
      orderDialogTitle.value = '加单'
    } else {
      orderDialogTitle.value = '点单'
    }
  })

  // 加载菜单列表
  listAllMenu({}).then(res => {
    menuList.value = res.data || []
  })

  // 清空已选菜品和搜索框
  selectedMenus.value = []
  menuSearchText.value = ''
  orderDialog.value = true
}

// 处理菜品行点击（检查库存）
function handleMenuRowClick(row) {
  // 如果库存为0，不允许点击
  if (row.num <= 0) {
    proxy.$modal.msgWarning(`${row.name} 已售罄，无法添加`)
    return
  }
  handleMenuSelect(row)
}

// 获取菜品行样式
function getMenuRowStyle({ row }) {
  if (row.num <= 0) {
    return {
      cursor: 'not-allowed',
      backgroundColor: '#fafafa',
      opacity: 0.6
    }
  }
  return {
    cursor: 'pointer'
  }
}

// 获取菜品行类名
function getMenuRowClassName({ row }) {
  return row.num <= 0 ? 'menu-row-disabled' : ''
}

// 选择菜品
function handleMenuSelect(menu) {
  // 再次检查库存（双重保险）
  if (menu.num <= 0) {
    proxy.$modal.msgWarning(`${menu.name} 已售罄，无法添加`)
    return
  }

  // 检查是否已经添加过该菜品
  const existingMenu = selectedMenus.value.find(item => item.menuId === menu.id)
  if (existingMenu) {
    existingMenu.quantity++
    calculateSubtotal(existingMenu)
  } else {
    selectedMenus.value.push({
      menuId: menu.id,
      menuName: menu.name,
      price: menu.price,
      quantity: 1,
      subtotal: menu.price
    })
  }
}

// 计算小计
function calculateSubtotal(item) {
  item.subtotal = (item.price * item.quantity).toFixed(2)
}

// 删除菜品
function removeMenu(index) {
  selectedMenus.value.splice(index, 1)
}

// 提交订单（带防抖）
function submitOrder() {
  // 防止重复提交
  if (isSubmitting.value) {
    console.log('正在提交中，请勿重复点击')
    return
  }

  if (selectedMenus.value.length === 0) {
    proxy.$modal.msgWarning('请至少选择一个菜品')
    return
  }

  // 设置提交中状态
  isSubmitting.value = true

  if (currentOrder.value) {
    // 加单 - 标记为加单菜品 (isAdditional = 1)
    const orderDetails = selectedMenus.value.map(item => ({
      orderId: currentOrder.value.id,
      menuId: item.menuId,
      menuName: item.menuName,
      price: item.price,
      quantity: item.quantity,
      subtotal: item.subtotal,
      isAdditional: 1  // 加单时标记为1
    }))

    addOrderItems(orderDetails).then(response => {
      proxy.$modal.msgSuccess('加单成功')
      orderDialog.value = false
      getList()
    }).catch(error => {
      console.error('加单失败:', error)
    }).finally(() => {
      // 无论成功或失败，都要重置提交状态
      isSubmitting.value = false
    })
  } else {
    // 点单（创建新订单）- 标记为非加单菜品 (isAdditional = 0)
    const orderDetailsList = selectedMenus.value.map(item => ({
      menuId: item.menuId,
      menuName: item.menuName,
      price: item.price,
      quantity: item.quantity,
      subtotal: item.subtotal,
      isAdditional: 0  // 点单时标记为0
    }))

    // 如果有餐位费，添加到订单明细
    if (tableFee.value > 0) {
      orderDetailsList.push({
        menuId: 0, // 餐位费使用特殊ID 0
        menuName: '餐位费',
        price: TABLE_FEE_PER_PERSON,
        quantity: currentTable.value.guestCount,
        subtotal: tableFee.value,
        isAdditional: 0  // 餐位费也标记为0
      })
    }

    const order = {
      tableId: currentTable.value.id,
      tableNumber: currentTable.value.tableNumber,
      waiterName: currentTable.value.waiterName,
      guestCount: currentTable.value.guestCount,
      openTime: currentTable.value.openTime,
      orderDetails: orderDetailsList
    }

    placeOrder(order).then(response => {
      proxy.$modal.msgSuccess('点单成功')
      orderDialog.value = false
      getList()
    }).catch(error => {
      console.error('点单失败:', error)
    }).finally(() => {
      // 无论成功或失败，都要重置提交状态
      isSubmitting.value = false
    })
  }
}

// 判断是否为新加的菜品（通过 isAdditional 字段判断）
function isNewItem(item) {
  // isAdditional = 1 表示加单的菜品，= 0 表示点单的菜品
  return item.isAdditional === 1
}

// 结账
function handleCheckout(table) {
  currentTable.value = table

  // 查询该餐台的订单
  getOrderByTableId(table.id).then(res => {
    const order = res.data
    if (!order) {
      proxy.$modal.msgWarning('该餐台没有订单，无法结账')
      return
    }

    // 设置结账信息
    checkoutInfo.tableNumber = table.tableNumber
    checkoutInfo.waiterName = table.waiterName
    checkoutInfo.guestCount = table.guestCount
    checkoutInfo.openTime = table.openTime
    checkoutInfo.totalAmount = order.totalAmount

    // 设置订单明细
    checkoutDetails.value = order.orderDetails || []

    // 保存订单ID用于结账
    currentOrder.value = order

    // 初始化实收金额为原始金额
    actualAmount.value = parseFloat(order.totalAmount)

    // 显示结账对话框
    checkoutDialog.value = true
  })
}

// 表格行类名（高亮待出餐菜品）
function getRowClassName({ row }) {
  // 排除餐位费
  if (row.menuId === 0 || row.menuName === '餐位费') {
    return ''
  }
  // 待出餐的菜品高亮显示
  if (row.kitchenStatus == 0 || row.kitchenStatus === '0') {
    return 'pending-kitchen-row'
  }
  return ''
}

// 确认结账（带防抖）
function confirmCheckout() {
  // 防止重复提交
  if (isCheckoutSubmitting.value) {
    console.log('正在结账中，请勿重复点击')
    return
  }

  if (!currentOrder.value || !currentTable.value) {
    proxy.$modal.msgWarning('订单信息不存在')
    return
  }

  if (actualAmount.value <= 0) {
    proxy.$modal.msgWarning('实收金额必须大于0')
    return
  }

  // 设置提交中状态
  isCheckoutSubmitting.value = true

  // 构建结账数据
  const checkoutData = {
    id: currentOrder.value.id,
    originalAmount: parseFloat(checkoutInfo.totalAmount), // 原始金额
    discountAmount: parseFloat(discountAmount.value), // 优惠金额
    actualAmount: actualAmount.value // 实收金额
  }

  // 结账订单（传递三个金额）
  checkoutOrder(checkoutData).then(response => {
    // 清空餐台
    checkoutTable(currentTable.value.id).then(() => {
      const discountMsg = discountAmount.value > 0
        ? `，优惠金额：¥${discountAmount.value}`
        : ''
      proxy.$modal.msgSuccess(`结账成功！实收金额：¥${actualAmount.value.toFixed(2)}${discountMsg}`)
      checkoutDialog.value = false
      getList()
    }).catch(error => {
      console.error('清空餐台失败:', error)
    }).finally(() => {
      // 重置提交状态
      isCheckoutSubmitting.value = false
    })
  }).catch(error => {
    console.error('结账失败:', error)
    proxy.$modal.msgError('结账失败')
    // 重置提交状态
    isCheckoutSubmitting.value = false
  })
}

// 关台
function handleCloseTable(table) {
  proxy.$modal.confirm('确认要关台吗？关台后将清空该餐台的所有信息。').then(() => {
    checkoutTable(table.id).then(response => {
      proxy.$modal.msgSuccess('关台成功')
      getList()
    })
  }).catch(() => {})
}

// 取消预定
function handleCancelReservation(table) {
  proxy.$modal.confirm('确认要取消预定吗？').then(() => {
    // 取消预定就是将状态改为空闲
    updateTable({
      id: table.id,
      status: '0',
      reservationName: null,
      reservationPhone: null,
      reservationTime: null,
      reservationCount: null
    }).then(response => {
      proxy.$modal.msgSuccess('取消预定成功')
      getList()
    })
  })
}

// 初始化餐台
function handleInitialize() {
  proxy.$modal.confirm('确认要初始化餐台数据吗？这将创建7个卡座和7个包间。').then(() => {
    initializeTables().then(response => {
      proxy.$modal.msgSuccess('初始化成功')
      getList()
    })
  })
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
// 优化后的餐台管理样式
.table-management-optimized {
  padding: 0;
  background: #f0f2f5;
  height: calc(100vh - 84px);
  overflow-y: auto;
  overflow-x: hidden;

  .table-section-optimized {
    margin: 0 0 24px 0;
    padding: 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    .section-header-optimized {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 2px solid #409eff;

      .header-left-optimized {
        display: flex;
        align-items: center;
        gap: 12px;

        .section-icon-optimized {
          font-size: 22px;
          color: #409eff;
        }

        .section-name-optimized {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
        }
      }
    }

    .table-grid-optimized {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 18px;

      .table-card-optimized {
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        &.status-free {
          border-left: 4px solid #67c23a;
          background: linear-gradient(135deg, #f0f9ff 0%, #e8f8f5 100%);
        }

        &.status-busy {
          border-left: 4px solid #f56c6c;
          background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        }

        &.status-reserved {
          border-left: 4px solid #e6a23c;
          background: linear-gradient(135deg, #fffbf0 0%, #fff4e6 100%);
        }

        .card-header-optimized {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 14px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e4e7ed;

          .table-number-optimized {
            font-size: 20px;
            font-weight: 600;
            color: #303133;
          }
        }

        .card-body-optimized {
          min-height: 100px;
          margin-bottom: 14px;

          .table-info-optimized {
            .info-item-optimized {
              display: flex;
              align-items: center;
              margin: 8px 0;
              font-size: 13px;
              color: #606266;

              .info-icon-optimized {
                margin-right: 8px;
                font-size: 15px;
                color: #909399;
              }

              .info-text-optimized {
                font-weight: 500;
              }
            }
          }

          .table-empty-optimized {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100px;
            color: #67c23a;

            .empty-icon-optimized {
              font-size: 42px;
              margin-bottom: 6px;
              animation: pulse 2s infinite;
            }

            .empty-text-optimized {
              font-size: 15px;
              font-weight: 600;
            }
          }
        }

        .card-actions-optimized {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;

          .el-button {
            flex: 1;
            min-width: 75px;
            font-size: 13px;
            font-weight: 500;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// 旧版样式保留
.table-management {
  .table-section {
    margin-bottom: 30px;

    .section-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #409eff;

      .el-icon {
        margin-right: 8px;
        font-size: 20px;
      }
    }

    .table-grid {
      .table-card {
        border: 2px solid #e4e7ed;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: all 0.3s;
        background: #fff;

        &:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }

        &.status-free {
          border-color: #67c23a;
          background: #f0f9ff;
        }

        &.status-busy {
          border-color: #f56c6c;
          background: #fef0f0;
        }

        &.status-reserved {
          border-color: #e6a23c;
          background: #fdf6ec;
        }

        .table-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ebeef5;

          .table-number {
            font-size: 20px;
            font-weight: bold;
            color: #303133;
          }
        }

        .table-body {
          min-height: 100px;
          margin-bottom: 15px;

          .table-info {
            p {
              display: flex;
              align-items: center;
              margin: 8px 0;
              font-size: 14px;
              color: #606266;

              .el-icon {
                margin-right: 8px;
                color: #909399;
              }
            }
          }

          .table-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100px;
            color: #67c23a;

            .el-icon {
              font-size: 40px;
              margin-bottom: 10px;
            }

            span {
              font-size: 16px;
              font-weight: bold;
            }
          }
        }

        .table-actions {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;

          .el-button {
            flex: 1;
            min-width: 70px;
          }
        }
      }
    }
  }

  // 优化后的点单对话框样式
  .order-dialog-optimized {
    border-radius: 0 !important;

    :deep(.el-overlay-dialog) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(.el-dialog) {
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
    }

    :deep(.el-dialog__body) {
      padding: 0 !important;
      height: 60vh;
      max-height: 60vh;
      overflow: hidden;
      background: #f5f7fa;
    }

    :deep(.el-dialog__header) {
      padding: 0 !important;
      margin: 0 !important;
    }

    // 禁用的菜品行样式
    :deep(.menu-row-disabled) {
      background-color: #fafafa !important;
      opacity: 0.6;

      &:hover {
        background-color: #fafafa !important;
      }
    }
  }

  // 优化后的结账对话框样式
  .checkout-dialog-modern {
    border-radius: 0 !important;

    :deep(.el-overlay-dialog) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(.el-dialog) {
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
    }

    :deep(.el-dialog__body) {
      padding: 0 !important;
      max-height: 60vh;
      overflow-y: auto;
      background: #f5f7fa;
    }

    :deep(.el-dialog__header) {
      padding: 0 !important;
      margin: 0 !important;
    }

    :deep(.el-dialog__footer) {
      padding: 0 !important;
      margin: 0 !important;
      border-top: 1px solid #e4e7ed;
    }
  }

  // 结账对话框内容样式
  .checkout-container-modern {
    // 表格滚动条样式
    :deep(.el-table__body-wrapper) {
      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #f56c6c 0%, #e6a23c 100%);
        border-radius: 4px;
      }

      &::-webkit-scrollbar-track {
        background: #f5f7fa;
        border-radius: 4px;
      }
    }
  }



  // 数量输入框样式
  .quantity-input-modern {
    :deep(.el-input-number__decrease),
    :deep(.el-input-number__increase) {
      width: 32px !important;
      font-size: 14px !important;
    }

    :deep(.el-input__inner) {
      text-align: center !important;
      font-weight: 600 !important;
      font-size: 14px !important;
    }
  }





  .order-container-optimized {
    display: flex !important;
    flex-direction: row !important;
    gap: 0;
    height: 60vh;
    background: #f5f7fa;

    .menu-selection-optimized,
    .order-details-optimized {
      display: flex !important;
      flex-direction: column !important;
      background: #fff;
      overflow: hidden;
      width: 50% !important;
      flex: none !important;
    }

    .menu-selection-optimized {
      border-right: 2px solid #e4e7ed;
    }

    .menu-table-wrapper-optimized {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      height: calc(60vh - 56px);

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #f5f7fa;
      }

      &::-webkit-scrollbar-thumb {
        background: #dcdfe6;
        border-radius: 4px;

        &:hover {
          background: #c0c4cc;
        }
      }
    }

    .order-details-optimized {
      .order-table-wrapper-optimized {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(60vh - 200px);

        &::-webkit-scrollbar {
          width: 8px;
        }

        &::-webkit-scrollbar-track {
          background: #f5f7fa;
        }

        &::-webkit-scrollbar-thumb {
          background: #dcdfe6;
          border-radius: 4px;

          &:hover {
            background: #c0c4cc;
          }
        }
      }

      // 现代化汇总区域
      .order-summary-modern {
        flex-shrink: 0;
        padding: 18px 20px !important;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%) !important;
        border-top: 3px solid #f56c6c !important;
        box-shadow: 0 -4px 16px rgba(245, 108, 108, 0.2);

        .summary-card-modern {
          background: rgba(255, 255, 255, 0.8) !important;
          border-radius: 12px;
          padding: 16px;
          backdrop-filter: blur(10px);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

          .summary-row-modern {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;

            .summary-item-modern {
              display: flex;
              align-items: center;
              gap: 8px;

              .summary-icon-modern {
                font-size: 18px;
                color: #667eea;

                &.total {
                  font-size: 22px;
                  color: #f56c6c;
                }
              }

              .summary-label-modern {
                color: #606266;
                font-size: 14px;
                font-weight: 600;

                &.total {
                  color: #303133;
                  font-size: 16px;
                  font-weight: 700;
                }
              }
            }

            .summary-value-modern {
              color: #303133;
              font-size: 16px;
              font-weight: 700;

              &.total {
                color: #f56c6c !important;
                font-size: 26px !important;
                font-weight: 800;
              }
            }

            &.total-row-modern {
              padding-top: 14px;
              border-top: 2px dashed #f56c6c;
              margin-top: 6px;
            }
          }

          .summary-divider-modern {
            height: 2px;
            background: linear-gradient(90deg, transparent, #f56c6c, transparent);
            margin: 8px 0;
            border-radius: 2px;
          }
        }
      }

      .order-summary-optimized {
        flex-shrink: 0;
        padding: 14px 16px;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        border-top: 2px solid #f56c6c;
        box-shadow: 0 -2px 12px rgba(245, 108, 108, 0.15);

        .summary-items-custom {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .summary-item-custom {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .summary-label-custom {
              color: #606266;
              font-size: 13px;
              font-weight: 500;
            }

            .summary-value-custom {
              color: #303133;
              font-size: 15px;
              font-weight: 600;
            }

            &.total-item-custom {
              padding-top: 8px;

              .summary-label-custom {
                color: #303133;
                font-size: 15px;
                font-weight: 700;
              }

              .total-value-custom {
                color: #f56c6c;
                font-size: 22px;
                font-weight: 700;
              }
            }
          }

          .summary-divider-custom {
            height: 1px;
            background: linear-gradient(90deg, transparent, #f56c6c, transparent);
            margin: 4px 0;
          }
        }
      }
    }

    // 现代化菜品名称单元格
    .menu-name-cell-modern {
      display: flex !important;
      align-items: center;
      gap: 10px;
      padding: 4px 0;

      .menu-icon-wrapper {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
        flex-shrink: 0;

        &.selected {
          background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%) !important;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }

        .food-icon-modern {
          font-size: 18px;
          color: #fff !important;
        }
      }

      .menu-name-text {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }

    .price-text-modern {
      color: #f56c6c;
      font-weight: 700;
      font-size: 15px;
      background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .subtotal-text-modern {
      color: #f56c6c;
      font-weight: 700;
      font-size: 16px;
      background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    // 数量输入框样式
    .quantity-input-modern {
      :deep(.el-input-number__decrease),
      :deep(.el-input-number__increase) {
        width: 32px !important;
        font-size: 14px;
      }

      :deep(.el-input__inner) {
        text-align: center;
        font-weight: 600;
        font-size: 14px;
      }
    }

    // 添加按钮样式
    .add-btn-modern {
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }

    // 删除按钮样式
    .delete-btn-modern {
      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
      }

      &:active {
        transform: scale(0.95);
      }
    }

    // 数量输入框样式
    .quantity-input-modern {
      :deep(.el-input__wrapper) {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
      }
    }

    // 空购物车样式
    .empty-cart-modern {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 40px 20px;

      .empty-icon {
        font-size: 80px;
        color: #dcdfe6;
        margin-bottom: 16px;
      }

      .empty-text {
        font-size: 16px;
        color: #909399;
        font-weight: 600;
        margin: 0 0 8px 0;
      }

      .empty-hint {
        font-size: 13px;
        color: #c0c4cc;
        margin: 0;
      }
    }

    // 表格样式优化
    .menu-table-modern,
    .order-table-modern {
      :deep(.el-table__row) {
        transition: all 0.3s ease;

        &:hover {
          background-color: #f5f7fa !important;
          transform: scale(1.01);
        }
      }

      :deep(.el-table__body-wrapper) {
        &::-webkit-scrollbar {
          width: 8px;
        }

        &::-webkit-scrollbar-track {
          background: #f5f7fa;
          border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb {
          background: #dcdfe6;
          border-radius: 4px;

          &:hover {
            background: #c0c4cc;
          }
        }
      }
    }

    .menu-name-cell {
      display: flex;
      align-items: center;
      gap: 6px;

      .food-icon {
        font-size: 16px;
        color: #67c23a;

        &.selected {
          color: #409eff;
        }
      }
    }

    .price-text-custom {
      color: #f56c6c;
      font-weight: 600;
      font-size: 14px;
    }

    .subtotal-text-custom {
      color: #f56c6c;
      font-weight: 700;
      font-size: 15px;
    }
  }

  // 旧版点单对话框样式
  .order-dialog {
    ::v-deep .el-dialog__body {
      padding: 15px 20px;
      max-height: 85vh;
      overflow: hidden;
    }
  }

  .order-container-new {
    display: flex;
    gap: 16px;
    height: calc(85vh - 180px);

    .menu-selection-new,
    .order-details-new {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e4e7ed;
      overflow: hidden;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-bottom: 1px solid #e4e7ed;

        .section-title {
          color: #fff;
          font-size: 15px;
          font-weight: 600;
          letter-spacing: 0.5px;
        }
      }

      .menu-table-wrapper,
      .order-table-wrapper {
        flex: 1;
        overflow: hidden;
        padding: 8px;
      }
    }

    .order-details-new {
      .order-summary-fixed {
        padding: 12px 16px;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
        border-top: 2px solid #e4e7ed;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

        .summary-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 6px 0;
          font-size: 14px;

          .label {
            color: #606266;
            font-weight: 500;
          }

          .value {
            color: #303133;
            font-weight: 600;
          }

          &.total {
            margin-top: 8px;
            font-size: 16px;

            .label {
              color: #303133;
              font-weight: 700;
            }

            .value {
              color: #f56c6c;
              font-size: 22px;
              font-weight: 700;
            }
          }
        }
      }
    }

    .price-text {
      color: #f56c6c;
      font-weight: 600;
      font-size: 13px;
    }

    .subtotal-text {
      color: #f56c6c;
      font-weight: 700;
      font-size: 13px;
    }
  }

  // 旧版样式保留（以防需要回退）
  .order-container {
    display: flex;
    gap: 20px;

    .menu-selection,
    .order-details {
      flex: 1;

      h4 {
        margin-bottom: 10px;
        color: #303133;
        font-size: 16px;
        font-weight: bold;

        .item-count {
          color: #909399;
          font-size: 14px;
          font-weight: normal;
        }
      }

      .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
    }

    .price-text {
      color: #f56c6c;
      font-weight: 500;
    }

    .subtotal-text {
      color: #f56c6c;
      font-weight: bold;
    }

    .order-summary {
      margin-top: 15px;
      padding: 15px;
      background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
      border-radius: 8px;
      border: 1px solid #dcdfe6;

      .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 8px 0;
        font-size: 14px;

        .amount {
          color: #606266;
          font-weight: 500;
        }

        &.total-row {
          margin-top: 10px;
          font-size: 18px;
          font-weight: bold;

          .total-amount {
            color: #f56c6c;
            font-size: 24px;
          }
        }
      }
    }
  }

  // 结账对话框样式
  .checkout-container {
    h4 {
      margin: 15px 0 10px 0;
      color: #303133;
      font-size: 16px;
      font-weight: bold;
    }

    .checkout-amount {
      padding: 15px;
      background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
      border-radius: 8px;
      border: 1px solid #dcdfe6;

      .amount-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 12px 0;

        .label {
          font-size: 15px;
          color: #606266;
          font-weight: 500;
        }

        .value {
          font-size: 16px;
          font-weight: bold;

          &.original-amount {
            color: #909399;
            text-decoration: line-through;
          }

          &.discount-amount {
            color: #67c23a;
          }

          &.final-amount {
            color: #f56c6c;
            font-size: 24px;
          }
        }

        &.adjust-row {
          background: #fff;
          padding: 10px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
        }

        &.discount-row {
          color: #67c23a;
        }

        &.total-row {
          margin-top: 15px;
          padding-top: 15px;
          font-size: 18px;
        }
      }
    }
  }
}

// ==================== 响应式适配 ====================

// 全局防止横向滚动条
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden !important;
}

.app-container {
  overflow-x: hidden !important;
}

// iPad 和平板端适配 (768px - 1024px)
@media screen and (min-width: 768px) and (max-width: 1024px) {
  // 防止横向滚动
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .app-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  // 点单对话框iPad适配 - 关键优化
  .order-dialog-optimized {
    :deep(.el-dialog) {
      width: 95vw !important;
      max-width: 95vw !important;
      margin: 3vh auto !important;
    }

    :deep(.el-dialog__body) {
      padding: 0 !important;
      overflow: hidden !important;
    }

    .order-container-optimized {
      height: 65vh !important;
      overflow: hidden !important;

      .menu-selection-optimized,
      .order-details-optimized {
        overflow: hidden !important;
      }

      .section-header-custom {
        padding: 10px 12px !important;
        flex-shrink: 0;

        .el-input {
          width: 140px !important;
        }
      }

      .menu-table-wrapper-optimized {
        height: calc(65vh - 52px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;

        :deep(.el-table) {
          // 调整表格列宽以适应iPad
          .el-table__body-wrapper {
            overflow-x: hidden !important;
          }

          // 菜品名称列 - 减小最小宽度
          .el-table__body td:nth-child(1),
          .el-table__header th:nth-child(1) {
            min-width: 100px !important;
          }

          // 单价列 - 固定宽度
          .el-table__body td:nth-child(2),
          .el-table__header th:nth-child(2) {
            width: 70px !important;
            min-width: 70px !important;
          }

          // 库存列 - 固定宽度
          .el-table__body td:nth-child(3),
          .el-table__header th:nth-child(3) {
            width: 60px !important;
            min-width: 60px !important;
          }

          // 操作列 - 固定宽度
          .el-table__body td:nth-child(4),
          .el-table__header th:nth-child(4) {
            width: 75px !important;
            min-width: 75px !important;
          }

          .el-button {
            padding: 4px 8px !important;
            font-size: 12px !important;

            .el-icon {
              font-size: 12px !important;
            }
          }
        }
      }

      .order-table-wrapper-optimized {
        height: calc(65vh - 185px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;

        :deep(.el-table) {
          .el-table__body-wrapper {
            overflow-x: hidden !important;
          }

          // 已选菜品表格列宽优化
          .el-table__body td:nth-child(1),
          .el-table__header th:nth-child(1) {
            min-width: 90px !important;
          }

          .el-table__body td:nth-child(2),
          .el-table__header th:nth-child(2) {
            width: 65px !important;
            min-width: 65px !important;
          }

          .el-table__body td:nth-child(3),
          .el-table__header th:nth-child(3) {
            width: 85px !important;
            min-width: 85px !important;
          }

          .el-table__body td:nth-child(4),
          .el-table__header th:nth-child(4) {
            width: 70px !important;
            min-width: 70px !important;
          }

          .el-table__body td:nth-child(5),
          .el-table__header th:nth-child(5) {
            width: 60px !important;
            min-width: 60px !important;
          }

          .el-input-number {
            width: 75px !important;

            :deep(.el-input__inner) {
              padding: 0 8px !important;
            }
          }
        }
      }

      .order-summary-optimized {
        padding: 10px 12px !important;
        flex-shrink: 0;

        .summary-items-custom {
          .summary-item-custom {
            padding: 6px 0 !important;

            .summary-label-custom {
              font-size: 13px !important;
            }

            .summary-value-custom {
              font-size: 15px !important;

              &.total-value-custom {
                font-size: 18px !important;
              }
            }
          }
        }
      }
    }
  }

  // 结账对话框iPad适配
  :deep(.el-dialog) {
    &[aria-label="结账"] {
      width: 90vw !important;
      max-width: 90vw !important;
      margin: 3vh auto !important;
    }
  }

  .checkout-container {
    overflow-x: hidden !important;

    :deep(.el-table) {
      .el-table__body-wrapper {
        overflow-x: hidden !important;
      }

      // 待出餐菜品高亮显示
      .pending-kitchen-row {
        background-color: #fef0f0 !important;

        &:hover > td {
          background-color: #fde2e2 !important;
        }

        td {
          color: #f56c6c;
          font-weight: 500;
        }
      }

      // 消费明细表格列宽优化
      .el-table__body td:nth-child(1),
      .el-table__header th:nth-child(1) {
        min-width: 100px !important;
      }

      .el-table__body td:nth-child(2),
      .el-table__header th:nth-child(2) {
        width: 70px !important;
        min-width: 70px !important;
      }

      .el-table__body td:nth-child(3),
      .el-table__header th:nth-child(3) {
        width: 60px !important;
        min-width: 60px !important;
      }

      .el-table__body td:nth-child(4),
      .el-table__header th:nth-child(4) {
        width: 75px !important;
        min-width: 75px !important;
      }

      .el-table__body td:nth-child(5),
      .el-table__header th:nth-child(5) {
        width: 90px !important;
        min-width: 90px !important;
      }
    }

    .checkout-amount {
      .amount-row {
        :deep(.el-input-number) {
          width: 160px !important;
        }
      }
    }
  }
}

// 手机端适配 (< 600px)
@media screen and (max-width: 599px) {
  .table-management-optimized {
    padding: 0;
    height: auto;
    min-height: calc(100vh - 84px);

    .table-section-optimized {
      margin: 0 0 12px 0;
      padding: 12px;

      .section-header-optimized {
        margin-bottom: 12px;
        padding-bottom: 10px;

        .header-left-optimized {
          gap: 8px;

          .section-icon-optimized {
            font-size: 18px;
          }

          .section-name-optimized {
            font-size: 16px;
          }
        }
      }

      .table-grid-optimized {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;

        .table-card-optimized {
          padding: 12px;

          .card-header-optimized {
            margin-bottom: 10px;
            padding-bottom: 8px;

            .table-number-optimized {
              font-size: 16px;
            }
          }

          .card-body-optimized {
            min-height: 80px;
            margin-bottom: 10px;

            .table-info-optimized {
              .info-item-optimized {
                font-size: 12px;
                margin-bottom: 4px;

                .info-icon-optimized {
                  font-size: 12px;
                }

                .info-text-optimized {
                  font-size: 12px;
                }
              }
            }

            .table-empty-optimized {
              .empty-icon-optimized {
                font-size: 28px;
              }

              .empty-text-optimized {
                font-size: 12px;
              }
            }
          }

          .card-actions-optimized {
            display: flex;
            flex-direction: column;
            gap: 6px;

            .el-button {
              width: 100%;
              margin: 0;
            }
          }
        }
      }
    }
  }

  // 开台对话框移动端适配
  :deep(.open-dialog-optimized) {
    width: 95% !important;
    margin: 0 auto;

    .el-dialog__body {
      padding: 12px;
    }

    .el-form-item {
      margin-bottom: 12px;
    }
  }

  // 换台对话框移动端适配
  :deep(.change-dialog-optimized) {
    width: 95% !important;
    margin: 0 auto;

    .el-dialog__body {
      padding: 12px;
    }
  }

  // 预定对话框移动端适配
  :deep(.reserve-dialog-optimized) {
    width: 95% !important;
    margin: 0 auto;

    .el-dialog__body {
      padding: 12px;
    }

    .el-form-item {
      margin-bottom: 12px;
    }
  }

  // 点单对话框移动端适配
  .order-dialog-optimized {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 10px auto !important;
    }

    :deep(.el-dialog__body) {
      padding: 0;
      height: auto !important;
      max-height: calc(100vh - 120px) !important;
      overflow-y: auto;
    }

    .order-container-optimized {
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      gap: 0;

      .menu-selection-optimized,
      .order-details-optimized {
        width: 100% !important;
        border-right: none !important;
      }

      .menu-selection-optimized {
        border-bottom: 2px solid #e4e7ed;
        max-height: 40vh;
      }

      .order-details-optimized {
        max-height: 50vh;
      }

      .section-header-custom {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;

        .header-left-custom {
          .section-icon-custom {
            font-size: 16px;
          }

          .section-title-custom {
            font-size: 14px;
          }
        }

        .el-input {
          width: 140px !important;
        }
      }

      .menu-table-wrapper-optimized {
        height: calc(40vh - 50px) !important;

        :deep(.el-table) {
          font-size: 12px;

          .el-table__header th {
            padding: 8px 0;
            font-size: 12px;
          }

          .el-table__body td {
            padding: 8px 0;
            font-size: 12px;
          }

          .el-button {
            padding: 4px 8px;
            font-size: 12px;
          }
        }
      }

      .order-table-wrapper-optimized {
        height: calc(50vh - 180px) !important;

        :deep(.el-table) {
          font-size: 12px;

          .el-table__header th {
            padding: 8px 0;
            font-size: 12px;
          }

          .el-table__body td {
            padding: 8px 0;
            font-size: 12px;
          }

          .el-input-number {
            width: 80px;
          }
        }
      }

      .order-summary-optimized {
        padding: 10px 12px;

        .summary-items-custom {
          .summary-item-custom {
            padding: 6px 0;

            .summary-label-custom {
              font-size: 13px;
            }

            .summary-value-custom {
              font-size: 15px;

              &.total-value-custom {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }

  // 结账对话框移动端适配
  :deep(.el-dialog) {
    &[aria-label="结账"] {
      width: 95% !important;
      margin: 10px auto !important;
    }
  }

  .checkout-container {
    .checkout-info {
      :deep(.el-descriptions) {
        .el-descriptions__label {
          font-size: 12px;
          padding: 8px;
        }

        .el-descriptions__content {
          font-size: 12px;
          padding: 8px;
        }
      }
    }

    h4 {
      font-size: 14px;
      margin: 12px 0 8px 0;
    }

    :deep(.el-table) {
      font-size: 12px;

      .el-table__header th {
        padding: 8px 0;
        font-size: 12px;
      }

      .el-table__body td {
        padding: 8px 0;
        font-size: 12px;
      }
    }

    .checkout-amount {
      .amount-row {
        padding: 8px 0;
        font-size: 13px;

        .label {
          font-size: 13px;
        }

        .value {
          font-size: 15px;

          &.final-amount {
            font-size: 18px;
          }
        }

        :deep(.el-input-number) {
          width: 150px !important;
        }
      }
    }
  }
}
</style>

<style>
/* 全局样式 - 强制去除对话框白色边框 */
.order-dialog-optimized .el-dialog,
.checkout-dialog-modern .el-dialog {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.order-dialog-optimized .el-dialog__header,
.checkout-dialog-modern .el-dialog__header {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.order-dialog-optimized .el-dialog__body,
.checkout-dialog-modern .el-dialog__body {
  padding: 0 !important;
}

.order-dialog-optimized .el-dialog__footer,
.checkout-dialog-modern .el-dialog__footer {
  padding: 0 !important;
  margin: 0 !important;
}
</style>